<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>个人中心</title>
	<link rel="shortcut icon" type="image/x-icon" href=""/>
	<link rel="stylesheet" type="text/css" href="css/personal.css"/>
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>

<div class="shopping" id="shop">
	<div class="head1">
		<div class="layui-row">
			<div class="layui-col-xs1">
				<div class="grid-demo"></div>
			</div>
			<div class="layui-col-xs4">
				<div class="grid-demo grid-demo-bg1">想淘精品好物，就上淘京</div>
			</div>

			<div class="layui-col-xs1">
				<div class="login">
					<div class="grid-demo grid-demo-bg1" id="classifiction_2" >
						<a id="login-reg" href="javascript:void(0)" onclick="logcheck()" style="margin-top: 5px;">登录/注册</a>
					</div>
					<div class="login_check">
						<div class="userpic"><a href="#" ><img src="imgs/购物.png" /></a></div>
						<div class="userinfo" >
							<div class="username" id="classifiction_2">
								<a id="uname" href="javascript:void(0)" >用户名</a>
								<h1><a href="javascript:void(0)" onclick="exit()">退出</a></h1>
							</div>
							<div class="userid" >ID:用户编号:<a id="uno" href="javascript:void(0)" ></a></div>
						</div>
					</div>
				</div>

			</div>
			<div class="layui-col-xs1">
				<div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="order.html">我的订单</a></div>
			</div>
			<div class="layui-col-xs1">
				<div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="javascript:void(0)">我的淘京</a></div>
			</div>
			<div class="layui-col-xs1">
				<div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="javascript:void(0)">商家服务</a></div>
			</div>
			<div class="layui-col-xs1">
				<div class="grid-demo" id="classifiction_2"><a href="javascript:void(0)">关于淘京</a></div>
			</div>
			<div class="layui-col-xs1">
				<div class="grid-demo" id="classifiction_2"><a href="javascript:void(0)">企业采购</a></div>
			</div>

		</div>

	</div>

	<div class="head">

		<div class="logo_pic"><a href="#"><img src="imgs/logo1.png" /></a></div>

		<div class="serch">
			<div class="serch_box"><input type="text" name="username" id="content"  placeholder="淘入好物，就用淘京"></div>
			<div class="serch_pic" ><a href="javascript:void(0)" @click="showDatail()"><img src="imgs/serch.png"/></a></div>
		</div>
		<div class="shoppingcart">
			<div class="shoppingcart_pic"><img src="imgs/shoppingcart.png" /></div>
			<div class="shoppingcart_char"><a href="cart.html"><h1>我的购物车<div class="num" ></div></h1></a></div>
		</div>
	</div>

	<div class="container">
		<div class="content">
			<div class="content-left">
				<ul class="content-title">
					<li><h1 class="person-info">个人中心</h1></li>
					<li><a  href="javascript:void(0)" class="selected personal">基本信息</a></li>
					<li><a href="javascript:void(0)" class="unselected adress">收货地址</a></li>
				</ul>

			</div>

			<div class="content-right" id="personal">

				<div class="info-list">
					<ul class="info" v-for="u in user">
						<li class="head-cover">
							<span >头像：</span>
							<a href="javascript:void(0)"> <img class="cover" :src="u.upics" /></a>
						</li>
						<li>
							<span>昵称：</span>
							<input type="text" name="uname" id="username"  v-model="u.uname" class="uName" /><button class="recharge" @click="updatename">修改</button>
							<!--								<span>昵称：</span>-->
							<!--								<span>{{u.uname}}</span><button class="recharge">更改</button>-->
						</li>
						<li>
							<span>邮箱：</span>
							<span>{{u.uemail}}</span>
						</li>
						<li>
							<span>性别：</span>
							<label>
								<input type="radio" name="gender" value="man" class="sex" checked="">
								男
							</label>

							<label>
								<input type="radio" name="gender" value="woman"class="sex">
								女
							</label>
						</li>
						<!--							<li >-->
						<!--								<span class="balance-name">余额：</span>-->
						<!--								￥<span id="balance">-->
						<!--										0-->
						<!--									</span>-->
						<!--								<button class="recharge">充值</button>-->
						<!--							</li>-->
						<li>
							<span>电话号码：</span>
							<span id="tel">{{u.utel}}</span>
						</li>


						<li class="button-update">

							<button class="update-button" ><a href="index.html">返回首页 </a></button>
						</li>


					</ul>
					<!-- 收获地址界面 -->
					<div class="adress-info">
						<div class="addAdress">
							<button class="add">新增地址</button>
						</div>
						<div class="adress-list">
<!--							<div class="specific-adress">-->
<!--								<ul>-->
<!--									<li class="title">-->
<!--										<span class="title_name">骆继磊</span>-->
<!--										<span class="title_province">河南</span>-->
<!--									</li>-->
<!--									<li>-->
<!--										<span class="adress_receive">收货人：</span>-->
<!--										<span class="receive_name">骆继磊</span>-->

<!--									</li>-->
<!--									<li>-->
<!--										<span class="adress_area">所在地区：</span>-->
<!--										<span class="area_name">河南</span>-->
<!--									</li>-->
<!--									<li>-->
<!--										<span class="adress_retail">地址：</span>-->
<!--										<span class="retail_name">成华大道</span>-->
<!--									</li>-->
<!--									<li>-->
<!--										<span class="adress_tel">手机：</span>-->
<!--										<span class="tel_name">110</span>-->
<!--									</li>-->

<!--								</ul>-->

<!--								<a href="#" class="adress-delete">删除</a>-->
<!--								<span class="adno">10086</span>-->
<!--							</div>-->

						</div>

					</div>
				</div>


			</div>
		</div>


	</div>




	<div id="footer" class="footer">
		<p> 关于我们 | 联系我们 | 联系客服 | 合作招商 | 商家帮助 | 营销中心 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 风险监测 | 质量公告 | 隐私政策 | 京东公益 | Media & IR</p>

		<p>京公网安备 11000002000088号 | 京ICP备11041704号 | ICP | 药品医疗器械网络服务备案 | 自营医疗器械经营资质 | 药品网络交易第三方平台备案凭证 | 新出发京零 字第大120007号</p>

		<p>互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2020]6112-1201号 | 违法和不良信息举报电话：4006561155</p>

		<p>Copyright © 2004 - 2023  京东JINGDONG 版权所有 | 消费者维权热线：4006067733 | 经营证照 | 医疗器械第三方平台备案凭证（京）网械平台备字（2023）第00013号 | 营业执照 | 增值电信业务经营许可证</p>

		<p>京东旗下网站： 京东钱包 | 京东云 | 网络内容从业人员违法违规行为举报电话：4006561155-3
		</p>

	</div>
</div>

</body>

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/ajaxfileupload.js"></script>
<script src="js/axios.js"></script>


<script>
	window.onload = function () {
		$.get("user?op=check", function (rs) {
			if (rs.code == 601) {//暂未登录
				window.location.href = "login.html";
			}
			if (rs.code == 200) {//登录成功
				var userData = localStorage.getItem('userData');
				if (userData) {
					userData = JSON.parse(userData);
					// 然后可以将userData传递给您需要的其他函数或组件进行处理
					$("#uname").html(userData.uname);
					$("#uno").html(userData.uno);
					$("#login-reg").html("欢迎:" + userData.uname);

				}
			}
		}, "json");

	}

	function exit(){
		$.get("user?op=exit", function (rs) {
			if (rs == 0) {//注销成功
				$("#uname").html('用户名');
				$("#uno").html('');
				$("#login-reg").html('登录/注册');
				localStorage.removeItem('userData');
				location.reload();

			}else{
				alert('退出失败');
			}
		},"json");
	}


	$(".adress-info").hide();
	$(".content-left a").click(function(){
		$(".selected").addClass("unselected");
		$(".selected").removeClass("selected");
		$(this).addClass("selected");
		$(this).removeClass("unselected");
		if($(this).hasClass("adress")){
			$(".info").hide();
			$(".adress-info").show();
		}
		if($(this).hasClass("personal")){
			$(".adress-info").hide();
			$(".info").show();
		}
	});
</script>
<script>
	var userData = localStorage.getItem('userData');
	userData = JSON.parse(userData);
	let uno = userData.uno;

	let app = new Vue({
		el:'#personal',
		data: {
			user:{},
			uno:uno
		},
		mounted:function(){

			axios.get("user",{params:{op:"finds",uno:this.uno}}).then(rs=>{
				if (rs.status==200){
					this.user=rs.data.data;

				}
			});
		},
		methods:{
			updatename:function () {
				var uname = document.getElementById("username").value;
				console.log(uname);
				axios.get("user",{params:{op:"update",uno:this.uno,uname:uname}}).then(rs=>{
					if (rs.status==200){

						console.log(rs);
						// localStorage.setItem('userData',rs);
					}
				});
			}
		}
	});



	//地址


	$(".add").click(function(){
		window.location.href="map.html";
	});

	function start(){
		$.get("address", {op: "finds", uno:uno}, function (rs) {
			$(".GoodsNumber").text(rs.count);
			showAddress(rs.data);
		}, "json");

	}
	function remove(obj){
		var adno=$(obj).closest(".specific-adress").find(".adno").text();
		$.get("address",{op:"delete",uno:uno,adno:adno},function(){

			if(rs>0){
				$(obj).closest(".specific-adress").remove();
			}else{
				alert("删除失败！");
			}


		},"json");


	}

	function showAddress(arr){
		let str = '';
		for (let i = 0; i < arr.length; i++) {

			var province = arr[i].address;
			if (province.indexOf("省") > 0) {
				province = province.substr(0, province.indexOf("省"));
			}
			console.log(arr);

			str += '<div class="specific-adress"><ul><li class="title">' +
					'<span class="title_name">'+arr[i].consignee+'</span>' +
					'<span class="title_province">'+province+'</span></li><li>' +
					'<span class="adress_receive">收货人：</span>' +
					'<span class="receive_name">'+arr[i].consignee+'</span>' +
					'</li><li><span class="adress_area">所在地区：</span>' +
					'<span class="area_name">'+province+'</span></li>' +
					'<li><span class="adress_retail">地址：</span>' +
					'<span class="retail_name">'+arr[i].address+'</span></li><li>' +
					'<span class="adress_tel">手机：</span>' +
					'<span class="tel_name">'+arr[i].artel+'</span></li></ul>'+
			'<a href="#" class="adress-delete" onclick="remove(this)">删除</a>'+
			'<span class="adno">'+arr[i].adno+'</span></div></div>';
		}
		console.log(str);
		$(".adress-list").html(str);

	}
	start();
</script>
</html>
